<template>
    <div class="userIndexBox" style="padding-top: 59px;">
        <!--  -->
        <el-carousel type="card" height="588px">
            <el-carousel-item>
                <div class="section_box carousel_01">
                    <router-link tag="button" to="/publishtype">免费发布需求</router-link>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="section_box carousel_02 text-center">
                    <router-link tag="button" to="/publishtype">免费发布需求</router-link>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div class="section_box carousel_03">
                    <router-link tag="button" to="/publishtype">免费发布需求</router-link>
                </div>
            </el-carousel-item>
        </el-carousel>
        <!-- 选择应用类型，快速发布 -->
        <div class="typeList item_box_w80 centerauto text-center">
            <el-row>
                <el-col :span="10">
                    <ul class="type_content clearfix">
                        <li v-for="(item,index) in typeData" :key="index" v-if="index < 4" @mouseover="typeOverFun(index)" @mouseout="typeOutFun(index)">
                            <div class="circle">
                                <img :src="item.photo" alt=""/>
                            </div>
                            <h4>{{item.name}}</h4>
                            <p>{{item.count}}+ 开发商</p>
                            <div v-show="item.isHover"><router-link :to="{path: '/publishedit',query: {'name': item.name,'id': item.id}}" class="fast_publish">快速发布需求</router-link></div>
                        </li>
                    </ul>
                </el-col>
                <el-col :span="4">
                    <div class="type_content flexbox spacebetween" style="min-height: 498px;">
                        <div class="ling_box flexbox spacebetween">
                            <!-- 向左的三角形 -->
                            <div class="triangle_border_left ling_text">
                                <router-link to="/codelist">
                                    <p><span>源码大厅</span></p>
                                </router-link>
                            </div>                                          
                            <!-- 向右的三角形 -->
                            <div class="triangle_border_right ling_text">
                                <router-link to="/codeedit">
                                    <p><span>发布源码</span></p>
                                </router-link>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="10">
                    <ul class="type_content clearfix">
                        <li v-for="(item,index) in typeData" :key="index" v-if="index > 3" @mouseover="typeOverFun(index)" @mouseout="typeOutFun(index)">
                            <div class="circle">
                                <img :src="item.photo" alt=""/>
                            </div>
                            <h4>{{item.name}}</h4>
                            <p>{{item.count}}+ 开发商</p>
                            <div v-show="item.isHover"><router-link :to="{path: '/publishedit',query: {'name': item.name,'id': item.id}}" class="fast_publish">快速发布需求</router-link></div>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <!-- 诚信开发者 -->
        <div class="typeList item_box_w80 centerauto">
            <h2 class="user_item_title text-center">诚信开发者</h2>
            <el-row :gutter="10" style="margin-top: 45px;">
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" v-for="(item,index) in gridTData" :key="index" style="margin-bottom: 20px;">
                    <el-card :body-style="{ padding: '0px',height: '100%',position: 'relative' }" style="height: 100%;">
                        <div class="clearfix borderBD" style="padding: 16px 15px;">
                            <div class="fl">
                                <router-link to="" class="toplinkbox">
                                    <img v-if="item.u_head_portrait" :src="item.u_head_portrait" class="displayB centerauto borderRadius" alt="" style="margin: 0;">
                                    <img v-else src="../../assets/images/userPic.png" class="displayB centerauto borderRadius" alt="" style="margin: 0;">
                                </router-link>
                            </div>
                            <div class="fl">
                                <h5 style="line-height: 21px;margin: 10px 0px 10px 10px;font-size: 15px;">{{item.u_nickname}}</h5>
                                <el-rate disabled v-model="item.start" style="margin-left: 10px;"></el-rate>
                            </div>
                        </div>
                        <div>
                            <div class="item_main_box main_middle_box">
                                <p class="multiplerowt" style="height: 57px;">{{(item.u_type == 1) ? item.u_personal_info : item.u_enterprise_info}}</p>
                                <div>
                                    <label for="" style="line-height: 19px;">擅长：</label>
                                    <span class="singlerow" style="display: inline-block;vertical-align: bottom;max-width: 87%;">{{item.p_skills_name}}</span>
                                </div>
                                <div>
                                    <label for="" style="line-height: 19px;">案例：</label>
                                    <span class="singlerow" style="display: inline-block;vertical-align: bottom;max-width: 87%;">{{item.cp_name}}</span>
                                </div>
                            </div>
                            
                            <div class="item_bottom_box flexbox spacebetween main_bottom_box">
                                <div class="item_b_address">
                                    <img src="../../assets/images/icon-location.png" alt=""/>
                                    {{item.u_province + (item.u_city?'-'+item.u_city:item.u_city)}}
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!-- 优质开发商等级 -->
        <div class="main__grade">
            <div class="grade__img">
                优质开发商<span class="title-circular"></span>等级
            </div>
            <div class="table-box">
                <el-table border :data="tabledata" stripe style="width: 100%">
                    <el-table-column prop="date" label="">
                        <template slot-scope="scope">
                            {{scope.row.title}}
                            <img :src="scope.row.ind == 0 ? require('../../assets/images/grade-1.png'): scope.row.ind == 1 ? require('../../assets/images/grade-2.png'): scope.row.ind == 2 ? require('../../assets/images/grade-3.png'): scope.row.ind == 3 ? require('../../assets/images/grade-4.png'): require('../../assets/images/grade-5.png')" alt="">
                        </template>
                    </el-table-column>
                    <el-table-column prop="privilege" label="等级特权"></el-table-column>
                    <el-table-column label="申请条件">
                        <template slot-scope="scope">
                            <p v-if="scope.row.condition">{{scope.row.condition}}</p>
                            <p>{{scope.row.conditions}}</p>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <p class="graderemarks">备注：如违反平台及优质开发商规则，则取消优质开发商资质。资质取消后再次申请成功，等级将重新 (Lv 1) 进行计算</p>
        </div>
        <!-- 现在，开始体验专业的众包服务 -->
        <div class="typeList item_box_w80 centerauto text-center">
            <div class="btn-group marginT40">
                <router-link tag="button" to="/publishtype">免费发布需求</router-link>
                <router-link tag="button" to="/housekeeper">预约项目管家</router-link>
            </div>
        </div>

    </div>
</template>
<script>
    
    import '../../assets/css/qualityplan.css'
    import '../../assets/css/main.css'
    export default {
        data(){
            return{
                typeData: [],
                gridTData: [],
                stepData: [
                    {'num': 1,'title': '发布需求','exp': '免费发布项目需求<br/>极速对接开发资源'},
                    {'num': 2,'title': '签订合同','exp': '浏览并挑选开发商<br/>在线签订电子合同'},
                    {'num': 3,'title': '开发实施','exp': '确认项目开发计划<br/>托管阶段开发费用'},
                    {'num': 4,'title': '验收支付','exp': '验收项目开发成果<br/>支付项目开发费用'},
                ],
                tabledata: [
                    {
                        ind: 0,
                        title: '一星优质开发商',
                        icon: './assets/images/grade-1.png',
                        privilege: '免除 10% 服务费',
                        condition: '',
                        conditions: '符合基本资质要求或众包信用要求平台内完成项目好评率100%',
                    },
                    {
                        ind: 1,
                        title: '二星优质开发商',
                        icon: './assets/images/grade-2.png',
                        privilege: '免除 20% 服务费',
                        condition: '已获得一星优质开发商资质',
                        conditions: '完成 2 个及以上项目开发服务且好评率100%',
                    },
                    {
                        ind: 2,
                        title: '三星优质开发商',
                        icon: './assets/images/grade-3.png',
                        privilege: '免除 30% 服务费',
                        condition: '已获得二星优质开发商资质',
                        conditions: '完成 4 个及以上项目开发服务且好评率90%',
                    },
                    {
                        ind: 3,
                        title: '四星优质开发商',
                        icon: './assets/images/grade-4.png',
                        privilege: '免除 40% 服务费',
                        condition: '已获得三星优质开发商资质',
                        conditions: '完成 8 个及以上项目开发服务且好评率90%',
                    },
                    {
                        ind: 4,
                        title: '五星优质开发商',
                        icon: './assets/images/grade-5.png',
                        privilege: '免除 50% 服务费',
                        condition: '已获得四星优质开发商资质',
                        conditions: '完成 16 个及以上项目开发服务且好评率90%',
                    },
                ],
            }
        },
        methods: {
            //鼠标悬停
            typeOverFun(ind){
                this.typeData[ind].isHover = true;
            },
            //鼠标移出
            typeOutFun(ind){
                this.typeData[ind].isHover = false;
            },
            init(){
                var _this = this;
                //应用类型
                this.$httpGet('/api/index/index/getProjectType').then(response => {

                    if(response.code == 200){

                        _this.typeData = response.msg;
                        for(var i=0;i<_this.typeData.length;i++){
                            _this.$set(_this.typeData[i],'isHover',false);
                        }
                    }

                });

                //优质开发商
                this.$httpGet('/api/index/Index/highQualityUser').then(response => {

                    if(response.code == 200){

                        _this.gridTData = response.msg;
                    }

                });

            },
        },
        mounted(){
            this.init();
        },
    }
</script>
<style scoped>
    .userIndexBox {
        min-height: 100vh;
        background: #fff;
    }
    .main_middle_box{
        margin-bottom: 2.2rem;
    }
    .main_bottom_box{
        border-top: 1px dashed #d7e5f0;
        width: 100%;
        position: absolute;
        bottom: 0px;
    }
</style>
